<template>
  <div class="Air">
    <div class="AirImg"></div>
    <div class="Aircontent">
      <div class="AirTop">
        <div class="AirTop_L">
          <div class="AirTop_L_Text">处理中：</div>
          <div class="AirTop_L_Num">
            <div id="AirTop_L_Num">
              <te-flop
                :number="180"
                :animationTime="3"
                :intervalTime="20000"
              ></te-flop>
            </div>
          </div>
          <span>个</span>
        </div>
        <div class="AirTop_R">
          <div class="AirTop_R_Text">报警数：</div>
          <div class="AirTop_R_Num">
            <div id="AirTop_R_Num">
              <te-flop
                :number="39"
                :animationTime="3"
                :intervalTime="20000"
              ></te-flop>
            </div>
          </div>
          <span>个</span>
        </div>
      </div>
      <div class="AirButtom">
        <div id="accessChartleft"></div>
        <div id="accessChartMiddle"></div>
        <div id="accessChartright"></div>
      </div>
      <div class="AirButtomText">
        <div class="ABText">
          <div class="ABTextzs">
            总数
            <span>16</span>
          </div>
          <div class="ABTextgzs">
            故障数
            <span>2</span>
          </div>
        </div>
        <div class="ABText">
          <div class="ABTextzs">
            总数
            <span>2</span>
          </div>
          <div class="ABTextgzs">
            故障数
            <span>0</span>
          </div>
        </div>
        <div class="ABText">
          <div class="ABTextzs">
            总数
            <span>0</span>
          </div>
          <div class="ABTextgzs">
            故障数
            <span>0</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {
    this.setChartLeft();
    this.setChartMiddle();
    this.setChartRight();
  },
  methods: {
    setChartLeft() {
      var saftLeftChart = this.$echarts.init(
        document.getElementById("accessChartleft")
      );
      var option = {
        backgroundColor: "transparent",
        color: ["#95C7FF", "#ffffff"],
        grid: {
          left: "10%",
        },

        title: {
          text: "水",
          left: "42%",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontSize: 28,
          },
        },
        series: [
          {
            name: "故障率",
            startAngle: 220,
            type: "pie",
            radius: ["60%", "75%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
                textStyle: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "white",
                  fontFamily: "dig",
                },
                formatter: "{c}%\n{b}",
              },
            },
            data: [
              {
                value: 62,
                name: "故障率",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#87a3ff", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#6045d5", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 38,
                name: "合格率",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#fff", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#fff", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                label: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      };
      saftLeftChart.setOption(option);
    },
    setChartMiddle() {
      var saftMiddleChart = this.$echarts.init(
        document.getElementById("accessChartMiddle")
      );
      var option = {
        backgroundColor: "transparent",
        color: ["#95C7FF", "#ffffff"],
        grid: {
          left: "10%",
        },

        title: {
          text: "电",
          left: "42%",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontSize: 28,
          },
        },
        series: [
          {
            name: "故障率",
            startAngle: 220,
            type: "pie",
            radius: ["60%", "75%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
                textStyle: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "white",
                  fontFamily: "dig",
                },
                formatter: "{c}%\n{b}",
              },
            },
            data: [
              {
                value: 64,
                name: "故障率",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#ffb56c", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#f1901d", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 36,
                name: "合格率",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#fff", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#fff", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                label: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      };
      saftMiddleChart.setOption(option);
    },
    setChartRight() {
      var saftRightChart = this.$echarts.init(
        document.getElementById("accessChartright")
      );
      var option = {
        backgroundColor: "transparent",
        color: ["#95C7FF", "#ffffff"],
        grid: {
          left: "10%",
        },

        title: {
          text: "控制系统",
          left: "30%",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontSize: 28,
          },
        },
        series: [
          {
            name: "故障率",
            startAngle: 220,
            type: "pie",
            radius: ["60%", "75%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
                textStyle: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "white",
                  fontFamily: "dig",
                },
                formatter: "{c}%\n{b}",
              },
            },
            data: [
              {
                value: 51,
                name: "故障率",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00e4ff", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#5fb9ff", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 49,
                name: "合格率",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#fff", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#fff", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                label: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      };
      saftRightChart.setOption(option);
    },
  },
};
</script>

<style>
.Air {
  width: 100%;
  height: 25%;
}
.Air .AirImg {
  width: 688px;
  height: 66px;
  background: url("../../../../../static/images/energy/空调系统.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.Aircontent {
  width: 100%;
  height: calc(100% - 112px);
}
.AirTop_L {
  width: 331px;
  height: 118px;
  background: rgba(0, 144, 255, 0.5);
  border-radius: 10px;
  margin-top: 30px;
  display: flex;
  margin-left: 50px;
}
.AirTop_L_Text {
  font-size: 31px;
  font-family: FZCuQian;
  font-weight: 400;
  color: #feffff;
  line-height: 115px;
  margin-left: 15px;
}
.AirTop_L_Num {
  width: 133px;
  height: 100%;
  margin-top: 15px;
  margin-left: -15px;
}
.AirTop_L > span {
  font-size: 21px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #00c6ff;
  line-height: 130px;
  margin-left: 10px;
}
.AirTop {
  width: 100%;
  height: 180px;
  display: flex;
}
.AirButtom {
  width: 100%;
  height: 214px;
  display: flex;
}

.AirTop_R {
  width: 331px;
  height: 118px;
  background: rgba(0, 144, 255, 0.5);
  border-radius: 10px;
  margin-top: 30px;
  display: flex;
  margin-left: 120px;
}
.AirTop_R_Text {
  font-size: 31px;
  font-family: FZCuQian;
  font-weight: 400;
  color: #feffff;
  line-height: 115px;
  margin-left: 24px;
}
.AirTop_R_Num {
  width: 133px;
  height: 47px;
  margin-top: 15px;
}
.AirTop_R > span {
  font-size: 21px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f51006;
  line-height: 130px;
  margin-left: 10px;
}
#AirTop_L_Num .te-dataNums li {
  width: 25px !important;
  height: 51px !important;
  /* background: rgba(11, 152, 254, 0.7) !important; */
  background: linear-gradient(
    to bottom,
    #00c6ff,
    transparent,
    #00c6ff
  ) !important;
}
#AirTop_R_Num .te-dataNums li {
  width: 25px !important;
  height: 51px !important;
  /* background: #F51006 !important; */
  background: linear-gradient(
    to bottom,
    #f51006,
    transparent,
    #f51006
  ) !important;
}
#accessChartleft {
  width: 30%;
  height: 240px;
}
#accessChartMiddle {
  width: 30%;
  height: 240px;
}
#accessChartright {
  width: 30%;
  height: 240px;
}
.AirButtomText {
  width: 100%;
  height: 50px;
  display: flex;
}

.ABText {
  width: 31%;
  height: 50%;
  display: flex;
}
.ABTextzs {
  font-size: 23px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b4e0f0;
  margin-left: 30px;
  width: 190px;
  height: 50px;
}
.ABTextzs > span {
  font-size: 29px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3dcf40;
  margin-left: 10px;
  line-height: -1px;
}
.ABTextgzs {
  font-size: 23px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b4e0f0;
  width: 190px;
  height: 50px;
}
.ABTextgzs > span {
  font-size: 29px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #e63c3c;
  margin-left: 20px;
}
</style>
